/* 社区管理-内容审核 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Button, Spin, Form, Input, Table, DatePicker, Modal, Select ,Radio ,message} from 'antd'
const RadioGroup = Radio.Group;
import moment from 'moment';
import ShowBigImg from '../../components/showBigImg'
import ShowVideo from '../../components/showVideoPlay'
/* 引用接口文档路径 */
import {
  contentSelect,contentAudit,contentDelete
} from 'actions/communityManage'

import {getbasetypefetch} from 'actions/common'

import '../../style/userControl.less'

const { MonthPicker, RangePicker } = DatePicker;
const FormItem = Form.Item
@Form.create({})
//abc
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",//基础数据列表
      contentModal:false,//列表内容详情弹窗
      radioValue:'1',//审核设置单选框默认值
      selectedRowKeys:[],//多选数组
      rangeList:[],//范围列表
      auditList:[],//审核设置列表
      showBigImgModal:false,//查看大图的弹窗
      imgArry:[],//图片数组
      imgIndex:"",//图片下标,
      showVideoModal:false,//查看视频弹窗
      videoData:"",//视频传递组件的数据
    }
    this.keyword={"userName":"","keyword":"","range":"",};//搜索关键词
    this.currentNumber = 1;//当前页面
    this.pagesize = 10;//每页条数
  }
  componentDidMount() {
    this.selectList();
    this.getAuditStatus();    
  }
  
  selectFn(){//点击搜索按钮
    this.keyword = {
      "userName":this.props.form.getFieldValue('userName'),
      "range":this.props.form.getFieldValue('range'),
      "keyword":this.props.form.getFieldValue('keyword'),
    };
    this.currentNumber=1;
    this.selectList();
  }
  selectList(pageNumber){//查询列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword);
    this.currentNumber = pageNumber||1;
    this.props.dispatch(contentSelect(
      datajson,
      (respose) => {
        this.setState({
          list: respose,
          selectedRowKeys:[]
        })
    }))
  }

  getAuditStatus(){
    this.props.dispatch(getbasetypefetch(
      {"type":8},
      (respose) => {
        this.setState({
          rangeList: respose.respData.resultData,
        })
    }))
    this.props.dispatch(getbasetypefetch(
      {"type":9},
      (respose) => {
        this.setState({
          auditList: respose.respData.resultData,
        })
    }))
  }


  changeSelect(value){//贴子状态
    this.listStatus = value;
  }

  onChangeRadio = (e) => {//审核设置radio
    this.setState({
      radioValue: e.target.value,
    });
  }

  onSelectChange = (selectedRowKeys) => {//监听多选框
    this.setState({ selectedRowKeys:selectedRowKeys });
  }

  showBigImg(item,index){//点击查看大图
    //item 图片数组 index 点击的下标
    this.setState({
      showBigImgModal:true,
      imgArry:item,
      imgIndex:index
    })
  }
  showBigImgModalCancel(){//关闭查看大图弹窗
    this.setState({
      showBigImgModal:false,
      imgArry:[],
      imgIndex:''
    })
  }
  showVideoPlay(item){//点击播放视频
    this.setState({
      showVideoModal:true,
      videoData:item,
    })
  }
  showVideoClose(){//关闭播放视频弹窗
    this.setState({
      showVideoModal:false,
      videoData:'',
    })
  }

  submintAudit(){//提交审核
    if(this.state.selectedRowKeys.length < 1){
      message.error('请选择帖子！')
    }else{
      Modal.confirm({
        content:"确定要执行操作吗？",
        onOk:()=>{
          if(this.state.radioValue == 3){
            this.props.dispatch(contentDelete(
              {"dynamicIds":this.state.selectedRowKeys},
              (respose) => {
                var length = this.state.list.respData.count ? this.state.list.respData.count : 0;
                if(Math.ceil(length/this.pagesize) == this.currentNumber && length%this.pagesize == this.state.selectedRowKeys.length && this.currentNumber != 1){
                  this.currentNumber = this.currentNumber - 1;
                }
                message.success(respose.respMsg);
                this.selectList(this.currentNumber);
                this.setState({ selectedRowKeys:[] });
            }))
          }else{
            this.props.dispatch(contentAudit(
              {"auditStatus":this.state.radioValue,"dynamicIds":this.state.selectedRowKeys},
              (respose) => {
                message.success(respose.respMsg);
                this.selectList(this.currentNumber);
                this.setState({ selectedRowKeys:[] });
            }))
          }
        },
        onCancel:()=>{
  
        }
      })     
    }    
  }


  columns() {//表格标题
    return [
      {
        title: '帖子状态',
        dataIndex: 'status',
        key: 'status',
        width: '10%',
        render: (text, recordId, index) => 
        <span>{text==0?'待审核':(text==1?'显示':'隐藏')}</span>,
      },
      {
        title: '帖子内容',
        dataIndex: 'content',
        key: 'content',
        width: '30%',        
      },
      {
        title: '帖子时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: '10%',
      },
      {
        title: '发表人',
        dataIndex: 'userName',
        key: 'userName',
        width: '10%',
      },
      {
        title: '图片',
        width: '30%',
        render: (text, recordId, index) => 
        <div>
          {
            !text.videoPath?
            text.imageAddr.map((item,i)=> {
              return(
                <div key={i} style={{cursor:'pointer'}} className="imgDiv" onClick={this.showBigImg.bind(this,text.imageAddr,i)}>
                  <img src={item} title="点击查看大图"/>                  
                </div>
              )
            }):''
          }
        </div>,
      },
      {
        title: '视频',
        width: '10%',
        render: (text, recordId, index) =>
        <div>
          {
            text.videoPath?
            <div style={{cursor:'pointer'}} className="imgDiv" onClick={this.showVideoPlay.bind(this,text)}>            
                <img src={text.imageAddr[0]||require('../../images/baseImg.png')} title="点击播放视频"/>                              
            </div>
          :''
          }
        </div>
      },
     
    ]
  }
  


  render () {
    const {form } = this.props
    const { getFieldDecorator } = form    
    const respData = this.state.list.respData ? this.state.list.respData : [];//刷新页面调用接口数据赋值
    const dateFormat = 'YYYY/MM/DD';
    const rowSelection = {
      selectedRowKeys:this.state.selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <div className="page">
        {/* 搜索条件筛选块 */}
        <div className="searcDiv">
          <p>审核查找</p>
          <Form onSubmit={this.selectFn.bind(this)} layout="inline">
            <FormItem label="发表人">      
              {
                getFieldDecorator('userName', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }             
            </FormItem>
            <FormItem label="范围">
              {
                getFieldDecorator('range', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Select placeholder="请选范围"    style={{ width: 200 }} >
                    <Select.Option value={""} key={99}>全部</Select.Option>                  
                    {
                      this.state.rangeList.map((item,i)=> {
                        return(
                          <Select.Option value={item.code} key={i}>{item.value}</Select.Option>
                        )
                      })
                    }
                  </Select>
                )
              }
            </FormItem>
            <FormItem label="内容关键词">
            {
                getFieldDecorator('keyword', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }  
            </FormItem>
            <Button type="primary" onClick={this.selectFn.bind(this)}>搜索</Button>
          </Form>
        </div>
        {/* 审核设置 */}
        <div className="searcDiv">
          <p>审核设置</p>
          <div>
            <RadioGroup onChange={this.onChangeRadio} value={this.state.radioValue}>
              {
                this.state.auditList.map((item,i)=> {
                  return(
                    <Radio value={item.code} key={i}>{item.value}</Radio>
                  )
                })
              }
            </RadioGroup>
            <Button type="primary" onClick={this.submintAudit.bind(this)}>提交</Button>
          </div>
        </div>
        <p>查询结果：{respData.count}条帖子满足要求</p>        
        {/*数据渲染列表*/}
        <Spin spinning={false}>
          <Table
            rowKey="id" 
            rowSelection={rowSelection}
            columns={this.columns()}//表格标题列
            dataSource={respData.ddlist}
            pagination={{ total: respData.count, current:this.currentNumber, pageSize: this.pagesize, onChange: this.selectList.bind(this)}}
            scroll={{ y: true }}
          />
        </Spin>
        {/* 查看大图的弹窗 */}
        {
          this.state.showBigImgModal?
          <ShowBigImg visible={this.state.showBigImgModal} imgArry={this.state.imgArry} imgIndex={this.state.imgIndex} closeModal={this.showBigImgModalCancel.bind(this)} />
          :""
        }
        {/* 播放视频弹窗 */}
        {
          this.state.showVideoModal?
          <ShowVideo visible={this.state.showVideoModal} videoData={this.state.videoData} closeModal={this.showVideoClose.bind(this)} />
          :""
        }
      </div>
    )
  }
}
